<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="formWrapper"
      labelPosition="left"
    >
      <el-form-item label="logo图片">
        <img-upload v-model="form.logo" :previewStyle="{width: '100px', height: '100px'}"></img-upload>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="链接地址">
        <el-input v-model="form.link"></el-input>
      </el-form-item>
      <el-form-item label="产品描述">
        <el-input type="textarea" v-model="form.describ"></el-input>
      </el-form-item>
      <el-form-item label="推荐理由">
        <el-input type="textarea" v-model="form.reasons"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio class="radio" :label="1">热门申请</el-radio>
          <el-radio class="radio" :label="2">小编推荐</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序权重">
        <el-col :span="12">
          <el-input-number v-model="form.sorts"></el-input-number>
        </el-col>
        <el-col :span="12">
          <p class="tips">数值越大越靠前</p>
        </el-col>
      </el-form-item>
      <hr>
      <el-button type="primary" class="long-btn" @click="save">保 存</el-button>
    </el-form>
  </div>
</template>

<script>
import { ImgUpload } from 'components'
import * as apis from 'services/creditProduct'

export default {
  name: 'creditProductEdit',
  components: {
    ImgUpload,
  },
  data() {
    return {
      form: {
        name: '',
        logo: '',
        sorts: 0,
        describ: '',
        reasons: '',
        type: 1,
        link: '',
      },
      rules: {

      },
    }
  },
  created() {
    const { id } = this.$route.query
    if (id) {
      this.id = id
      this.getProductById(id)
    }
  },
  methods: {
    async getProductById(id) {
      const data = await apis.getProductById(id)
      this.form = Object.assign({}, data)
    },
    save() {
      const payload = {
        name: this.form.name,
        logo: this.form.logo,
        sorts: this.form.sorts,
        describ: this.form.describ,
        reasons: this.form.reasons,
        type: this.form.type,
        link: this.form.link,
      }
      const type = this.$route.query.type

      if (this.id) {
        payload.id = this.id
      }

      apis.saveProducts(payload)
        .then(() => {
          this.$message({
            type: 'success',
            message: '保存成功!',
          })
          if (type === '1') {
            this.$router.push('/creditHot')
          } else {
            this.$router.push('/creditRecommend')
          }
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: '保存失败',
          })
        })
    },
  },
}
</script>

<style>

</style>
